<template>
  <div class="interview-skills">
    <div class="hm-mm-top" style='display:flex;justify-content: space-between;'>
      <!-- 企业列表 -->
      <!-- 左边输入搜索 -->
      <div class="hm-mm-top-left">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="标签名称">
            <el-input v-model="formSearch.tags" placeholder="请输入" style="width:280px"></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <el-select v-model="formSearch.province" placeholder="请选择" style="width:280px" @change='provincesOptChange'>
              <el-option v-for="item in provincesOptions" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="地区">
            <el-select v-model="formSearch.city" placeholder="请选择" style="width:280px" @change='provincesOptChange'>
              <el-option v-for="item in citysOptions" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业简称">
            <el-input v-model="formSearch.shortName" placeholder="" style="width:330px"></el-input>
          </el-form-item>
          <el-form-item label="状态" style="margin-left:28px">
             <el-select v-model="formSearch.state" placeholder="请选择" style="width:280px">
               <el-option label="启用" value="1"></el-option>
               <el-option label="禁用" value="0"></el-option>
             </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click='clearMsg'>清空</el-button>
            <el-button type="primary" @click="SearchOnSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
      <!-- 右边新增用户 -->
      <div class="hm-mm-top-right">
       <el-button type="success" @click="Visible"><i class="el-icon-edit" style="margin-right: 10px;"></i>新增用户</el-button>
      </div>
    <el-alert type="info" style="width: 99%;margin: 0 auto;" :closable='false'>
      <i class="el-icon-info"/>&nbsp;&nbsp;共&nbsp;{{DataNum}}&nbsp;条记录
    </el-alert>
    <!-- 列表 -->
    <div class="hm-mm-list" style="width: 100%">
      <el-table :data="tableData" style="width: 100%" v-loading="loading" element-loading-text="请给我一点时间">
        <el-table-column prop="id" label="序号" width="150" align='center'></el-table-column>
        <el-table-column prop="number" label="企业编号" width="300" align='center'></el-table-column>
        <el-table-column prop="company" label="企业简称" width="" align='center'></el-table-column>
        <el-table-column prop="tags" label="标签" width="" align='center'></el-table-column>
        <el-table-column prop="creatorID" label="创建者" width="" align='center'></el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="200" align='center'>
            <template #default="{row}">
              {{row.addDate.replace(/T/g,' ').replace(/.000Z/g,'')}}
            </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注" width="" align='center'></el-table-column>
        <el-table-column prop="state" label="状态" width="" align='center'>
            <template #default="{row}">
              {{row.state===1?'禁用':'启用'}}
            </template>
        </el-table-column>
        <el-table-column label="操作" width="200px" align='center'>
          <template #default="{row}">
           <el-button type="primary" icon="el-icon-edit" circle @click='recompose(row)' class="edit_button"></el-button>
           <el-tooltip class="item" effect="dark" content="启用" placement="top" v-if='row.state===0?true:false'>
            <el-button type="primary" icon="el-icon-check" circle @click='enable_button(row)' class="edit_check"></el-button>
           </el-tooltip>
           <el-tooltip class="item" effect="dark" content="禁用" placement="top" v-else>
            <el-button type="primary" icon="el-icon-close" circle @click='enable_button(row)' class="edit_close"></el-button>
           </el-tooltip>
           <el-button type="primary" icon="el-icon-delete" circle @click='del(row)' class="edit_delete"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next, sizes, jumper" :total="totalPages" :page-sizes="[5, 10, 20, 50]" style="float: right;margin-right: 10px;margin-top: 20px;"
      @current-change="handleCurrentChange" @size-change="handleSizeChange"></el-pagination>
    </div>
    <!-- 用户对话框 -->
    <el-dialog :title="title" :visible.sync="articledialogVisible" width="800px" @close='dialogclose'>
      <el-form :model="formData" status-icon :rules="rules" ref="formData" label-width="150px" class="demo-ruleForm">
        <el-form-item label="企业名称" prop="shortName">
          <el-input type="text" v-model="formData.shortName" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="所属公司" prop="company">
          <el-input type="text" v-model="formData.company" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item>
          <p>https://www.tianyancha.com （在此可查询所属公司全称及简称）</p>
        </el-form-item>
        <el-form-item label="城市地区" prop="province">
          <el-select v-model="formData.province" placeholder="请选择" style="width:175px" @change='provincesOptChange'>
            <el-option v-for="item in provincesOptions" :key="item" :label="item" :value="item"></el-option>
          </el-select>
          <el-select v-model="formData.city" placeholder="请选择" style="width:175px">
            <el-option v-for="item in citysOptions" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向 (企业标签)" prop="tags">
          <el-input v-model="formData.tags" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input type="textarea" :rows="2" placeholder="请输入" v-model="formData.remarks" style="width:350px">
          </el-input>
        </el-form-item>
        <el-form-item class="dialog-footer">
          <el-button @click="articledialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, update, remove, disabled} from '@/api/hmmm/companys'
import DataBar from '@/components/DataBar'

import {provinces,citys} from '@/api/hmmm/citys'
export default {
  created(){
    this.getlist({page:this.pageChange,pagesize:this.pagesizeChange})
    console.log(this.provincesOptions);
  },
  components:{
    DataBar
  },
  data () {
    return {
      provincesOptions:provinces(),//省市数据
      citysOptions:[],//城市数据
      formSearch:{
        page:1,
        pagesize:10,
        tags:'',
        province:'',
        city:'',
        shortName:'',
        state:'',
      },
      loading:true,
      DataNum:0,//数据一共多少条
      tableData: [],//列表渲染数据
      totalPages:10,
      pageChange:1,//页数变化
      pagesizeChange:10,//页面尺寸变化
      articledialogVisible:false,//文章弹出对话框
      id:'',
      formData:{
        city:'',
        company:'',
        isFamous:true,
        province:'',
        remarks:'',
        shortName:'',
        tags:'',
      },//用户弹出对话框绑定的数据
      title:'',//用户弹出对话框标题s
      rules:{
        shortName:[
      { required:true,message:'企业简称不能为空',trigger:'blur'},
      ],
        company:[
      { required:true,message:'所属公司不能为空',trigger:'blur'},
      ],
        province:[
      { required:true,message:'请选择省份',trigger:'blur'},
      ],
        tags:[
      { required:true,message:'请输入标签',trigger:'blur'},
      ],
        remarks:[
      { required:true,message:'备注不能为空',trigger:'blur'},
      ],
      },
    }
  },
  methods: {
    //#渲染函数
    async getlist(params){
      this.loading=true
      this.tableData=[]
      const {data}=await list(params)
      console.log(data);
      this.DataNum=data.counts//数据一共多少条
      this.totalPages=data.pages*this.pagesizeChange
      this.tableData=data.items
      this.loading=false
    },
    //#搜索功能
    //搜索城市change
    provincesOptChange(){
      const res=citys(this.formData.province)
      this.citysOptions=res
      if(this.formData.province)this.$refs.formData.clearValidate(['province'])
    },
    //搜索地区change
    async SearchOnSubmit() {
      this.formSearch.page=this.pageChange
      this.formSearch.pagesize=this.pagesizeChange
      console.log(this.formSearch)
      let newObj = {}
      for (let key in this.formSearch) {
        if (this.formSearch[key]) {
          newObj[key] = this.formSearch[key];
        }
      }
      console.log(newObj)
      try {
        this.getlist(newObj)
      } catch (error) {
        console.log(error);
      }
      this.getlist(this.formSearch)
    },
    clearMsg(){
      this.citysOptions=[]
      this.formSearch={
        page:1,
        pagesize:10,
        tags:'',
        province:'',
        city:'',
        shortName:'',
        state:'',
      }
    },
    async Visible(){
      this.title='创建用户'
      this.articledialogVisible=true
    },
    //#底部页数切换功能
    //页数变化
    handleCurrentChange(value){
      this.pageChange=value
      this.getlist({page:this.pageChange,pagesize:this.pagesizeChange})
    },
    //页面尺寸发生变化
    handleSizeChange(value){
      this.pagesizeChange=value
      this.getlist({page:this.pageChange,pagesize:this.pagesizeChange})
    },
    //#弹出框功能
    //关闭弹出窗口_重置校验
    dialogclose(){
      this.$refs.formData.resetFields()
      this.formData={
        city:'',
        company:'',
        isFamous:true,
        province:'',
        remarks:'',
        shortName:'',
        tags:'',
      }
    },
    //确定按钮
    async confirm(){
      this.$refs.formData.validate()
      if(this.title==='创建用户'){
        try {
          const res = await add(this.formData)
          console.log(res);
          this.$message.success('操作成功')
          this.articledialogVisible = false
          this.getlist({page:this.pageChange,pagesize:this.pagesizeChange})
        } catch (error) {
          console.log(error);
        }
      }
      else{
        console.log(this.formData);
        try {
          const res=await update(this.formData)
          console.log(res);
          this.$message.success('操作成功')
          this.articledialogVisible = false
          this.getlist({page:this.pageChange,pagesize:this.pagesizeChange})
        } catch (error) {
          console.log(error);
        }
      }
    },
    //#编辑修改功能
    async recompose(row){
      this.title='编辑用户'
      this.formData=row
      this.formData={
        addDate:row.addDate,
        city:row.city,
        creatorID:row.creatorID,
        id:row.id,
        isFamous:true,
        number:row.number,
        province:row.province,
        remarks:row.remarks,
        shortName:row.shortName,
        state:row.state,
        tags:row.tags,
      }
      this.articledialogVisible = true
    },
    //#删除
    async del(row){
        this.$confirm('此操作将永久删除用户 , 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          try {
          await remove(row)
          this.$message.success('删除成功!');
          this.getlist({page:this.pageChange,pagesize:this.pagesizeChange})
          } catch (error) {
          this.$message.error('删除失败!');
            console.log(error);
          }
        }).catch(() => {
          this.$message.info('已取消删除');
        });
    },
    //#启用按钮
    async enable_button(row){
      console.log(row);
        this.$confirm(`已成功${row.state===0?'启用':'禁用'}, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
         try {
           const state=row.state===0?1:0
           await disabled({id: row.id, state: state})
           this.getlist({page:this.pageChange,pagesize:this.pagesizeChange})
         } catch (error) {
           console.log(error);
         }
        }).catch(() => {
          this.$message.info('已取消删除');
        });
    }
  }
}
</script>

<style scoped lang='scss'>
.interview-skills{
  margin: 0 auto;
  background-color: #fff;
  width: 99%;
  border: 1px solid #d8dce5;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  padding: 20px;
  padding-bottom: 80px;
  .hm-mm-list{
    margin-top: 20px;
  }
  .hm-mm-top{
    margin-top: 10px;
    .hm-mm-top-left{
      margin-left: 25px;
    }
  }
  .hm-mm-top-right{
    margin-top: -60px;
    margin-left: 91%;
    margin-bottom: 25px;
  }
  ::v-deep .dialog-footer{
   .el-form-item__content{
    text-align: center;
    margin-right: 100px;
    margin-top: 50px;
   }
  }
  ::v-deep .cell{
     .edit_button{
      color: #409eff !important;
      background: #ecf5ff !important;
      border-color: #b3d8ff !important;
    }
    .edit_button:hover{
      color: #ecf5ff !important;
      background: #409eff !important;
    }
     .edit_check{
      color: #67c23a !important;
      background: #f0f9eb !important;
      border-color: #c2e7b0 !important;
    }
    .edit_check:hover{
      color: #ecf5ff !important;
      background: #67c23a !important;
    }
     .edit_close{
      color: #e6a23c !important;
      background: #fdf6ec !important;
      border-color: #f5dab1 !important;
    }
    .edit_close:hover{
      color: #ecf5ff !important;
      background: #e6a23c !important;
    }
     .edit_delete{
      color: #f56c6c !important;
      background: #fef0f0 !important;
      border-color: #fbc4c4 !important;
    }
    .edit_delete:hover{
      color: #ecf5ff !important;
      background: #f56c6c !important;
    }
  }
}
</style>

